<!DOCTYPE html>
<html>
    <head>
        <title>Trigonometry</title>
        <style type="text/css">
            canvas {
                border-width: 1px;
                border-style: solid;
                border-color: #000;
            }
        </style>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var functions = ["sin", "cos", "tan"];
                for (var i = 0; i < functions.length; ++i) {
                    var func = functions[i];
                    var canvas = document.getElementById(func);
                    var ctx = canvas.getContext("2d");
                    for (var x = 0; x < canvas.width; ++x) {
                        var y = -Math[func](x / 20) * canvas.height / 4 + canvas.height / 2;
                        ctx.fillStyle = "red";
                        ctx.fillRect(x-1, y-1, 2, 2);
                        ctx.fillStyle = "black";
                        ctx.fillRect(x, canvas.height / 2, 1, 1);
                    }
                }
            });
        </script>
    </head>
    <body>
        <h1>Sine</h1>
        <canvas id="sin" width="300" height="100"></canvas>
        <h1>Cosine</h1>
        <canvas id="cos" width="300" height="100"></canvas>
        <h1>Tangent</h1>
        <canvas id="tan" width="300" height="100"></canvas>
    </body>
</html>
